<template>
  <div class="anime-filter">
    <div class="filter-container">
      <!-- 类型筛选 -->
      <div class="filter-group">
        <span class="filter-label">类型：</span>
        <router-link
            :to="getFilterLink('type', 'all')"
            class="filter-item"
            :class="{ active: currentFilters.type === 'all' || !currentFilters.type }"
        >
          全部
        </router-link>
        <router-link
            v-for="type in animeTypes"
            :key="type.value"
            :to="getFilterLink('type', type.value)"
            class="filter-item"
            :class="{ active: currentFilters.type === type.value }"
        >
          {{ type.label }}
        </router-link>
      </div>

      <!-- 地区筛选 -->
      <div class="filter-group">
        <span class="filter-label">地区：</span>
        <router-link
            :to="getFilterLink('region', 'all')"
            class="filter-item"
            :class="{ active: currentFilters.region === 'all' || !currentFilters.region }"
        >
          全部
        </router-link>
        <router-link
            v-for="region in regions"
            :key="region.value"
            :to="getFilterLink('region', region.value)"
            class="filter-item"
            :class="{ active: currentFilters.region === region.value }"
        >
          {{ region.label }}
        </router-link>
      </div>

      <!-- 年份筛选 -->
      <div class="filter-group">
        <span class="filter-label">年份：</span>
        <router-link
            :to="getFilterLink('year', 'all')"
            class="filter-item"
            :class="{ active: currentFilters.year === 'all' || !currentFilters.year }"
        >
          全部
        </router-link>
        <router-link
            v-for="year in years"
            :key="year.value"
            :to="getFilterLink('year', year.value)"
            class="filter-item"
            :class="{ active: currentFilters.year === year.value }"
        >
          {{ year.label }}
        </router-link>
      </div>

      <!-- 状态筛选 -->
      <div class="filter-group">
        <span class="filter-label">状态：</span>
        <router-link
            :to="getFilterLink('status', 'all')"
            class="filter-item"
            :class="{ active: currentFilters.status === 'all' || !currentFilters.status }"
        >
          全部
        </router-link>
        <router-link
            v-for="status in statuses"
            :key="status.value"
            :to="getFilterLink('status', status.value)"
            class="filter-item"
            :class="{ active: currentFilters.status === status.value }"
        >
          {{ status.label }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 筛选选项数据
const animeTypes = [
  { value: 'action', label: '热血' },
  { value: 'comedy', label: '搞笑' },
  { value: 'romance', label: '恋爱' },
  { value: 'sci-fi', label: '科幻' },
  { value: 'fantasy', label: '奇幻' },
  { value: 'sports', label: '运动' },
  { value: 'drama', label: '剧情' }
]

const regions = [
  { value: 'japan', label: '日本' },
  { value: 'china', label: '中国' },
  { value: 'america', label: '欧美' },
  { value: 'korea', label: '韩国' }
]

const years = [
  { value: '2023', label: '2023' },
  { value: '2022', label: '2022' },
  { value: '2021', label: '2021' },
  { value: '2020', label: '2020' },
  { value: '2019', label: '2019' },
  { value: 'old', label: '更早' }
]

const statuses = [
  { value: 'ongoing', label: '连载中' },
  { value: 'completed', label: '已完结' },
  { value: 'upcoming', label: '即将播出' }
]

// 从当前路由获取筛选参数
const currentFilters = computed(() => {
  return {
    type: route.query.type,
    region: route.query.region,
    year: route.query.year,
    status: route.query.status
  }
})

// 生成带当前路由参数的链接
const getFilterLink = (filterName, filterValue) => {
  const query = { ...route.query }

  if (filterValue === 'all') {
    // 如果选择"全部"，则移除该筛选参数
    delete query[filterName]
  } else {
    // 否则设置筛选参数
    query[filterName] = filterValue
  }

  // 重置页码到第一页
  delete query.page

  return {
    path: route.path,
    query
  }
}
</script>

<style scoped>
.anime-filter {
  background-color: #f8f8f8;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.filter-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 20px;
}

.filter-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.filter-label {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
  min-width: 40px;
}

.filter-item {
  font-size: 14px;
  color: #555;
  margin-right: 15px;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.filter-item:hover {
  color: #3498db;
}

.filter-item.active {
  background-color: #3498db;
  color: white;
}

.filter-item.active:hover {
  color: white;
}

@media (max-width: 768px) {
  .filter-group {
    flex-wrap: wrap;
  }

  .filter-item {
    margin: 5px 10px 5px 0;
  }
}
</style>
